<template>
  <div class="setting-content inside-comment">
    <h2 class="setting-header">
      <strong>数据统计</strong>
      <el-button type="primary" @click="showExport = true">数据导出</el-button>
    </h2>
    <div class="comment-data">
      <div class="data-box">
        <div class="label">总留言</div>
        <div class="total">{{ commentData.totalCommentCount }}</div>
      </div>
      <div class="data-box">
        <div class="label">总回复</div>
        <div class="total">{{ commentData.totalReplyCount }}</div>
      </div>
    </div>
    <PageView />
    <BarView />
    <MytabView />
    <el-dialog v-model="showExport" title="数据导出" width="550px">
      <div class="export-box">
        <div class="label">选择时间</div>
        <el-date-picker
          v-model="exportTime"
          type="daterange"
          range-separator="到"
          start-placeholder="选择开始日期"
          end-placeholder="选择结束日期"
        />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showExport = false">取消</el-button>
          <el-button type="primary" @click="exportData">导出</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import PageView from "../components/PageView";
import BarView from "../components/BarView";
import MytabView from "../components/MytabView";
import { getCount, exportCount } from "@/api/count";
import { ref } from "vue";

const commentData = ref([]);
const getCommentData = async () => {
  const res = await getCount();
  commentData.value = res.data;
};

getCommentData();

//留言统计数据导出
const showExport = ref(false);
const exportTime = ref("");
const exportData = async () => {
  console.log("exportTime",exportTime.value);
  let params = {
    startTime: new Date(exportTime.value[0]).getTime(),
    endTime: new Date(exportTime.value[1]).getTime()
  };
  if(isNaN(params.startTime)){
    params.startTime = ''
  }
  if(isNaN(params.endTime)){
    params.endTime = ''
  }
  exportCount(params)
    .then(response => {
      const blob = new Blob([response], { type: 'xlsx' });
     
      // 创建下载链接
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', "导出留言数据.xlsx"); // 设置下载文件名
      document.body.appendChild(link);
      link.click();

      // 清理资源
      window.URL.revokeObjectURL(url);
      document.body.removeChild(link);
      })
    .catch(error => {
      console.error('文件导出失败:[', error);
      alert('文件导出失败，请稍后重试]！');
    });
};
</script>
<style scoped>
.setting-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.setting-content {
  width: 100%;
}
.comment-data {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  padding: 24px;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;

  .data-box {
    flex: 1;
    min-width: 200px;
    position: relative;

    &:not(:last-child)::after {
      content: "";
      position: absolute;
      right: -20px;
      top: 0;
      bottom: 0;
      width: 1px;
      background: #f0f0f0;
    }

    .label {
      font-size: 14px;
      color: #909399;
      margin-bottom: 12px;
    }

    .total {
      font-size: 36px;
      font-weight: bold;
      color: #303133;
      line-height: 1.2;
      margin-bottom: 16px;
    }

    .today,
    .yesterday {
      font-size: 13px;
      color: #606266;
      margin-bottom: 8px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
.export-box {
  display: flex;
  align-items: center;
  .label{
    margin-right: 10px;
    font-size: 16px;
    color: $black;
  }
}
</style>
